<template>
	<view class="content">
		<!-- com_fixed -->
		<!-- 头部 star-->
		<view class="header_item p-r c-f">
			<view class="bg p-a"><image class="image" :src="imgPrefix('/static/image/mine_bg.png')"></image></view>
			<view class="user_info m_l_48 p-r dis-flex flex-y-center">
				<view class="user_left p-r" @tap.stop="login()">
					<block v-if="is_login" >
						<!-- 学生信息 -->
						<block v-if="userIdentity==0" >
							<image v-if="info.user.avatar!=''" :src="info.user.avatar" mode="aspectFill" class="user_img border1"></image>
							<image v-else :src="imgPrefix('/static/image/icon/default_avatar.png')" class="user_img"></image>
						</block>
						<!-- 老师信息 -->
						<block v-if="userIdentity==1" >
							<block v-if="teacher.headeravatar!=''">
								<image :src="teacher.headeravatar" mode="aspectFill" class="user_img border1"></image>
								<image class="teacher_grade p-a" v-if="teacher.grade!=0" :src="teacher.grade==1?imgPrefix('/static/image/teacher/grade1.png'):teacher.grade==2?imgPrefix('/static/image/teacher/grade2.png'):imgPrefix('/static/image/teacher/grade3.png')"></image>
							</block>
							<image v-else :src="imgPrefix('/static/image/icon/default_avatar.png')" class="user_img"></image>
						</block>
					</block>
					<block v-else @tap.stop="login()">
						<image :src="imgPrefix('/static/image/icon/default_avatar.png')" class="user_img"></image>
					</block>
				</view>
				<view class="user_right f_5" v-if="is_login">
					<view v-if="userIdentity==0">
						<view v-if="info.user.nickname!=''"  class="user_name f_40">{{info.user.nickname}}</view>
						<text v-if="info.user.mobile!=''" class="user_phone f_24">{{ is_login?phoneStr(info.user.mobile):'' }}</text>
					</view>
					<view v-if="userIdentity==1">
						<view v-if="teacher.nickname!=''"  class="user_name f_40">{{teacher.nickname}}</view>
						<view v-if="teacher.teaching_year>=0" class="teaching_year f_26">
						<block v-if="teacher.grade!=0">
							<text class="text c-f">{{teacher.grade==1?'铜':(teacher.grade==2?'银':'金')}}牌教师</text><text class="margin15">·</text>
						</block>
						 教龄<text class="text">{{teacher.teaching_year}}</text>年</view>
					</view>
				</view>

				<!-- #ifdef MP-WEIXIN -->
				<view v-else class="user_right f_40" v-else @tap.stop="login()">登录</view>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view  v-else class="user_right f_40" v-else @tap.stop="login()">登录</view>
				<!-- #endif -->
			</view>
			<view class="user_info_list" @click.stop="bindTapLable(3,'/pages/course_record/index')">
				<view class="info_item">
					<text class="lable_num font_bebas">{{ is_login ? userIdentity==0?info.day_count:teacher.day : 0 }}</text>
					<text class="lable_text">{{userIdentity==0?'积累天数':'入驻天数'}}</text>
				</view>
				<view class="info_item">
					<text class="lable_num font_bebas">{{ is_login ?  userIdentity==0?info.hour_count:teacher.hour : 0 }}</text>
					<text class="lable_text">{{userIdentity==0?'积累课时':'已上课时'}}</text>
				</view>
				<view class="info_item">
					<text class="lable_num font_bebas">{{ is_login ?  userIdentity==0?info.language_course_count:teacher.course_count : 0 }}</text>
					<text class="lable_text">{{userIdentity==0?'学习语种':'积累课次'}}</text>
				</view>
			</view>
		</view>
		<!-- 头部 end-->
		<view class="lable_list p-r">
			<!-- 评论start -->
			<view class="comment-box p-r" v-if="userIdentity==1&&JSON.stringify(teacher)!='{}'">
				<image :src="imgPrefix('/static/image/teacher/common_bg.png')" class="bg p-a"></image>
				<view class="dis-flex flex-x-between flex-y-between comment">
					<view class="dis-flex flex-dir-column flex-x-between flex-box">
						<view class="navy_blue f_28">
							综合评分
						</view>
						<view class="comment_status dis-flex">
							<image v-for="(item,index) in teacher.com_score" :key="index" :src="imgPrefix('/static/image/icon/comment_status_1.png')" ></image>
						</view>
					</view>
					<view class="dis-flex flex-dir-column flex-x-between flex-box flex-y-center">
						<view class="navy_blue f_28">效果满意度</view>
						<view class="f_28">
							{{teacher.result_like}}
						</view>
					</view>
					<view class="dis-flex flex-dir-column flex-x-between flex-box flex-y-end">
						<view class="navy_blue f_28 t-c" style="width: 140rpx;">服务满意度</view>
						<view class="t-c f_28"  style="width: 140rpx;">
							{{teacher.service_like}}
						</view>
					</view>
				</view>
			</view>
			<!-- 评论end -->
			<view class="lable_item" v-for="(item, index) in lableList" :key="index" @tap.stop="bindTapLable(index+4,item.page)">
				<view class="lable_left">
					<image :class="['lable_icon', is_login ?  '' : 'grayscale']" :src="imgPrefix(item.imgUrl)"></image>
					<text :class="['lable_name navy_blue', 'f_5',userIdentity!=0?'':( is_login ? '' : index <= 4 ? 'gery1' : '')]">{{ item.lableName }}</text>
				</view>
				<view class="lable_right"><image class="next_icon" :src="imgPrefix('/static/image/icon/mine_next_icon.png')"></image></view>
			</view>
			<view class="lable_item" v-for="(item, index) in commonList" :key="index" @tap="bindTapLable(index,item.page)">
				<view class="lable_left">
					<image :class="['lable_icon']" :src="imgPrefix(item.imgUrl)"></image>
					<text :class="['lable_name navy_blue', 'f_5']">{{ item.lableName }}</text>
				</view>
				<view class="lable_right"><image class="next_icon" :src="imgPrefix('/static/image/icon/mine_next_icon.png')"></image></view>
				<!-- #ifdef MP-WEIXIN -->
				<button v-if="index==0&&userIdentity==1" class="share-btn" open-type="contact">客服</button>
				<!-- #endif -->
			</view>
		</view>
		<!-- <view class="f_28 f_normal navy_blue exit t-c" v-if="is_login" @tap="bindTapLable(9)">退出账号</view> -->
		<!-- 客服弹窗-->
		<zan-popup :show="showPopup" type="bottom" @close="closePopup">
			<view class="popup oh">
				<block v-if="popupType == 0">
					<view class="select_btn" @tap.stop="closePopup">
						可语在线客服
						<!-- #ifdef MP-WEIXIN -->
						<button class="share-btn" open-type="contact">客服</button>
						<!-- #endif -->
					</view>
					<view @tap.stop="callPhone" class="select_btn">可语客服微信号：{{ phone }}</view>
				</block>
				<view @tap.stop="closePopup" class="select_btn">取消</view>
			</view>
		</zan-popup>
		<!-- 进入我的名片之前要先填写授课信息 -->
		<zan-popup :show="showBalanceLow">
			<view :class="['popup','teacher','perfect']">
				<image lazy-load class="top_img" :src="imgPrefix('/static/image/teacher/message1.png')"></image>
				<view class="other_info">
					<view class="title f_40 navy_blue t-c">完善授课信息</view>
					<view class="msg f_28 gery1 t-c">查看我的名片前，需先花1分钟完善授课信息，是否前往完善</view>
					<view class="btn" @tap.stop="closeBalanceLowPopup,pageTo('/pages/teacher/teaching_information/index')">完善信息</view>
				</view>
				<image @tap.stop="closeBalanceLowPopup" class="close_border_icon" :src="imgPrefix('/static/image/icon/close_border_icon.png')"></image>
			</view>
		</zan-popup>
		<authorization @close="closeLoginPopup" @confirm="confirm" :showPopup="authorizationShow"></authorization>
	</view>
</template>

<script>
const app = getApp();
import zanPopup from '@/components/popup/index.vue';
import { commonMixinFun } from '@/static/mixins/common.js';
import { comPageMixinFun } from '@/static/mixins/comPageCommon.js';
import API from '@/static/api/index.js';
import { setPhone,deepClone } from '@/static/uitls/common.js';
import authorization from '@/components/authorization/index.vue'; //authorization
export default {
	mixins: [commonMixinFun, comPageMixinFun],
	components: {
		zanPopup,
		authorization
	},
	data() {
		return {
			showBalanceLow: false, //是否可以进入我的名片
			authorizationShow:false,
			info: {
				user:{
					mobile:''
				}
			}, //用户信息
			teacher: {
			}, //教师信息
			showPopup: false,
			popupType: 0, // 0可语客服  1分享可语
			phone: app.globalData.phone,
			lableList: [
				{
					imgUrl: '/static/image/icon/mine_order.png',
					lableName: '我的订单',
					page: '/pages/order_list/index'
				},
				{
					imgUrl: '/static/image/icon/mine_account.png',
					lableName: '可语钱包',
					page: '/pages/my_account/index'
				},
				{
					imgUrl: '/static/image/icon/mine_needs.png',
					lableName: '我的需求',
					page: '/pages/my_needs/index'
				},
				{
					imgUrl: '/static/image/icon/mine_courseware.png',
					lableName: '我的课件',
					page: '/pages/my_courseware/index'
				},
				{
					imgUrl: '/static/image/icon/mine_card.png',
					lableName: '教师名片夹',
					page: '/pages/teacher_card/index'
				}
			],
			teacherLableList:[
				{
					imgUrl: '/static/image/teacher/authentication.png',
					lableName: '授课认证',
					page: '/pages/teacher/write_info/index'
				},{
					imgUrl: '/static/image/icon/mine_needs.png',
					lableName: '授课信息',
					page: '/pages/teacher/teaching_information/index'
				},
				{
					imgUrl: '/static/image/icon/mine_account.png',
					lableName: '可语钱包',
					page: '/pages/teacher/my_account/index'
				},
				{
					imgUrl: '/static/image/icon/mine_order.png',
					lableName: '我的订单',
					page: '/pages/teacher/order_list/index'
				},
				{
					imgUrl: '/static/image/teacher/courseware.png',
					lableName: '我的课件',
					page: '/pages/teacher/my_courseware/index'
				},
				{
					imgUrl: '/static/image/teacher/card.png',
					lableName: '我的名片',
					page: '/pages/teacher/my_card/index'
				}
			],
			commonList:[
				{
					imgUrl: '/static/image/icon/mine_service.png',
					lableName: '客服白小可'
				},
				{
					imgUrl: '/static/image/icon/mine_about.png',
					lableName: '关于可语',
					page: '/pages/about/index'
				},
				{
					imgUrl: '/static/image/icon/mine_share.png',
					lableName: '分享可语',
					page: '/pages/share_page/index'
				}
			]
		};
	},
	methods: {
		// 关闭弹窗事件
		closeBalanceLowPopup(delay = 0) {
			setTimeout(() => {
				this.showBalanceLow = !this.showBalanceLow;
			}, delay);
		},
		login(){
			this.authorizationShow=true
		},
		closeLoginPopup(){
			this.authorizationShow=false
			this.is_login = app.globalData.LOGION;
		},
		confirm(){
			this.closeLoginPopup()
			this.userIdentity = app.globalData.userIdentity;
			this.comShow(false)
		},
		// 通用方法 star
		comLoad() {
			API.getPhone().then(({code,data})=>{
				if(code==1){
					this.phone = data.service;
					app.globalData.phone = data.service;
				}
			})
		},
		comShow(state=true) {
			if(this.userIdentity!=0&&this.hasOwnProperty('teacherLableList')){
				this.lableList = deepClone(this.teacherLableList)
			}
			this._getMineInfo(state);
			uni.$on('updateUserInfo',res=>{
				if(res.code==1){
					this.getInfoCallback(res)
				}
			})
		},
		_getMineInfo(state) {
			if(this.is_login){
				if(state){
					this.setLoadingReverse(); // 设置加载状态的（在mixins里设置）
				}
				let send = this.userIdentity==0?API.getMineInfo():API.getTeacherInfo();
				send.then(res => {
					app._log(res)
					this.getInfoCallback(res)
					if(state){
						this.setLoadingReverse();
					}
				}).catch(err=>{
					if(state){
						this.setLoadingReverse();
					}
				});
			}
		},
		getInfoCallback(res){
			if (res.code == 1) {
				if(this.userIdentity==0){
					this.info = res.data;
					app.globalData.readingCount= res.data.reading_count;
				}else{
					this.teacher=res.data.teacher;
					app.globalData.readingCount= res.data.teacher.reading_count;
				}
				app._log("teacher",this.teacher)
			}else{
				app._log(res)
			}
		},
		// 置底事件 // 已经禁用了下拉刷新和触底事件
		// comReachBottom() {
		// 	app._log('我的页面到底了')
		// },
		// 通用方法 end

		phoneStr(phone){
			// app._log(phone)
			return setPhone(phone)
		},
		bindTapLable(index,page){
			app._log("--",index,page)
			if(page=='/pages/teacher/my_card/index'){
				app._log("--")
				if(this.teacher.teacher_course==null){
					this.closeBalanceLowPopup()
				}else{
					this.pageTo(page,{teacherInfo:JSON.stringify(this.teacher)});
				}
			}else{
				switch (Number(index)) {
					case 0:
						if(this.userIdentity==0){ // 学生
							this.popupType = 0;
							this.showPopup = true;
						}
						// this.showToast('客服白小可')
					break;
					case 1:
						// this.showToast('关于可语')
						this.pageTo(page);
					break;
					case 2:
						// this.showToast('分享可语')
						if(this.userIdentity==0){ // 学生
								this.pageTo(page);
						}else{//教师
							this.pageTo(page,{teacherInfo:JSON.stringify(this.teacher)});
						}
					break;
					case 3:
						if(this.is_login){
							this.pageTo(page);
						}else{
							this.showToast('请先登录');
						}
						// this.showToast('点击顶部三个参数')
					break;
					default:
						this.defaultPage(index,page);
					break;
				}
			}
			
		},
		defaultPage(index,page){
			if(this.userIdentity==0){ // 学生
				if(this.is_login){
					this.pageTo(page);
				}else{
					this.showToast('请先登录');
				}
			}else{//教师
				switch (Number(index)) {
					case 4:
						// this.showToast('授课认证')
					case 5:
						// this.showToast('授课信息')
					case 6:
						// this.showToast('可语钱包')
					case 7:
						// this.showToast('我的订单')
					case 8:
						// this.showToast('我的课件')
						this.pageTo(page);
					break;
					case 9:
						// this.showToast('我的名片')
						this.pageTo(page,{teacherInfo:JSON.stringify(this.teacher)});
					break;
				}
			}
		},
		// 关闭弹窗
		closePopup() {
			this.showPopup = false;
		},
		callPhone() {
			// console.log(this.phone)
			uni.makePhoneCall({
				phoneNumber: this.phone
			});
			this.closePopup()
		}
	}
};
</script>

<style lang="scss">
.bg {
	width: 100%;
	height: 100%;
	.image {
		width: 100%;
		height: 512rpx;
	}
}
.content {
	min-height: calc(100vh - constant(safe-area-inset-bottom) - 98rpx);
	min-height: calc(100vh - env(safe-area-inset-bottom) - 98rpx);
}
.header_item {
	width: 750rpx;
	height: 462rpx;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border-bottom: 16rpx solid #f8f8f8;
	.user_info {
		.user_left,
		.user_img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}
		.user_img {
			border: 4rpx solid #fff;
		}
		.teacher_grade{
			width: 48rpx;
			height: 48rpx;
			border: 2rpx solid #fff;
			border-radius: 50%;
			right: 0;
			bottom: 0;
		}
		.border1 {
			border: 4rpx solid #fff;
		}
		.user_left {
			margin-right: 24rpx;
		}

		.user_right {
			display: flex;
			flex-direction: column;
			.user_name {
				line-height: 56rpx;
				margin-bottom: 8rpx;
			}
			.user_phone {
				line-height: 34rpx;
			}
			.margin15{
				margin-right: 15rpx;
			}
		}
	}
	.user_info_list {
		margin-top: 64rpx;
		display: flex;
		justify-content: space-around;
		padding-bottom: 24rpx;
		.info_item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;
			&:nth-of-type(1) {
				margin-right: 10rpx;
			}
			&:nth-of-type(3) {
				margin-left: 10rpx;
			}
			&:not(:last-child):after {
				display: block;
				content: '';
				position: absolute;
				width: 2rpx;
				height: 24rpx;
				background-color: rgba(255,255,255,0.5);
				right: -94rpx;
			}
			.lable_text {
				font-size: 26rpx;
				line-height: 34rpx;
				color: rgba(255,255,255,0.5);
			}
			.lable_num {
				margin-bottom: 4rpx;
				font-size: 40rpx;
				line-height: 54rpx;
			}
		}
	}
}

.lable_list {
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	padding:48rpx;
	background: white;
	.lable_ {
		&item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 48rpx;
			position: relative;
		}
		&left {
			display: flex;
			align-items: center;
		}
		&right {
			.next_icon {
				width: 32rpx;
				height: 32rpx;
			}
		}
		&icon {
			width: 56rpx;
			height: 56rpx;
			background-color: #eff2fe;
			border-radius: 16rpx;
		}
		&name {
			margin-left: 24rpx;
			font-size: 28rpx;
		}
	}
}
.comment-box{
	margin-bottom: 48rpx;
	width: 654rpx;
	height: 154rpx;
	border-radius: 16rpx;
	.bg{
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.comment{
		height: 100%;
		padding: 24rpx;
	}
	.comment_status{
		image{
			width: 40rpx;
			height: 40rpx;
		}
	}
	.navy_blue{
		font-family: PingFang SC;
		font-weight: normal;
	}
}
.exit {
	line-height: 72rpx;
	margin:0 48rpx 28rpx 48rpx ;
	background-color: #ffffff;
	border-radius: 16rpx;
	border: solid 2rpx #f5f0fe;
	color: #9c71fe;
}
.popup {
	width: 750rpx;
	height: 354rpx;
	background-color: #f9f9f9;
	border-radius: 48rpx 48rpx 0rpx 0rpx;
	.select_btn {
		width: 750rpx;
		line-height: 112rpx;
		color: #252748;
		background-color: #ffffff;
		text-align: center;
		font-size: 34rpx;
		position: relative;
		&:nth-of-type(2) {
			border-top: 1rpx solid rgba(204, 204, 204, 0.5);
			border-bottom: 16rpx solid #f9f9f9;
		}
		&:last-child {
			color: #8f8f9a;
		}
	}
}
.grayscale {
	filter: grayscale(1);
}
.teaching_year{
	color: rgba(255, 255, 255, 0.7);
	.text{
		color: #ffffff;
		margin: 0 10rpx;
	}
}

.popup {
	text-align: center;
	position: relative;
}

.popup .search_img {
	width: 596rpx;
	height: 854rpx;
}

.popup .close_border_icon {
	margin-top: 56rpx;
	width: 80rpx;
	height: 80rpx;
}

.btn_view {
	position: absolute;
	width: 516rpx;
	height: 119rpx;
	left: 42rpx;
	top: 682rpx;
}
.popup.teacher{
	width: 606rpx;
	border-radius: 24rpx;
	background-color: #fff;
	position: relative;
	padding:32rpx 44rpx;
	.top_img{
		width: 606rpx;
		height: 272rpx;
		position: absolute;
		left:0rpx;
	}
	&.perfect{
		height: 476rpx;
		.top_img{
			top: -128rpx;
		}
	}
	&.success{
		height: 434rpx;
		.top_img{
			top:-170rpx;
		}
	}
	.other_info{
		position: absolute;
		bottom:32rpx;
		.title{
			padding-bottom: 16rpx;
		}
		.msg{
			width: 518rpx;
		}
		.btn{
			margin: 32rpx auto 0;
			width: 478rpx;
			line-height: 92rpx;
			color: #fff;
			font-size: 32rpx;
			background-image: linear-gradient(270deg, 
				#7f4aff 0%, 
				#9254ff 100%);
			border-radius: 16rpx;
		}
	}
	.close_border_icon{
		position: absolute;
		bottom: -149rpx;
		left: 257rpx;
	}
}

</style>
